<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='utf-8'>
  <title>HTML5 Video</title>
  <script src="script.js">
  </script>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <h1>HTML5 Video Events and API</h1>

  <p>This page demonstrates the new <a
  href='http://www.w3.org/TR/html5/video.html#video'>HTML5 video
  element</a>, its <a
  href='http://www.w3.org/TR/html5/video.html#htmlmediaelement'>media API</a>, and the <a
  href='http://www.w3.org/TR/html5/video.html#mediaevents'>media events</a>. Play, pause, and seek in the entire
  video, change the volume, mute, change the playback rate (including
  going into negative values). See the effect on the video and on the
  underlying events and properties.</p>

  <div>
    <video id='video'
      controls preload='none' 
      poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div id='buttons'>
      <a href="#" onclick="document._video.load()">load()</a>
      <a href="#" onclick="document._video.play()">play()</a>
      <a href="#" onclick="document._video.pause()">pause()</a><br>
      <a href="#" onclick="document._video.currentTime+=10">currentTime+=10</a>
      <a href="#" onclick="document._video.currentTime-=10">currentTime-=10</a>
      <a href="#" onclick="document._video.currentTime=50">currentTime=50</a><br>
      <a href="#" onclick="document._video.playbackRate++">playbackRate++</a>
      <a href="#" onclick="document._video.playbackRate--">playbackRate--</a>
      <a href="#" onclick="document._video.playbackRate+=0.1">playbackRate+=0.1</a>
      <a href="#" onclick="document._video.playbackRate-=0.1">playbackRate-=0.1</a><br>
      <a href="#" onclick="document._video.volume+=0.1">volume+=0.1</a>
      <a href="#" onclick="document._video.volume-=0.1">volume-=0.1</a>
      <a href="#" onclick="document._video.muted=true">muted=true</a>
      <a href="#" onclick="document._video.muted=false">muted=false</a><br>
      <a href="#" onclick="switchVideo(0);">Sintel teaser</a>
      <a href="#" onclick="switchVideo(1);">Bunny trailer</a>
      <a href="#" onclick="switchVideo(2);">Bunny movie</a>
      <a href="#" onclick="switchVideo(3);">Test movie</a>
    </div>

	<div class="clear"></div>

    <table summary='The Media Properties table contains the value of the media properties'>
      <caption>Media Properties</caption>
      <tbody id='properties'>
      </tbody>
    </table>

    <table summary='The Media Events table contains the number of times each media event has been received'>
      <caption>Media Events</caption>
      <tbody id='events'>
      </tbody>
    </table>

    <table id='canPlayType' summary='The Media Types table indicates what media types are supported'>
      <caption>canPlayType</caption>
      <tbody id='m_video'>
      </tbody>
    </table>

    <table id='tracks' summary='The Media Types table indicates what media types are supported'>
      <caption>Tracks</caption>
      <tbody>
	<tr>
	  <th>Audio</th><td id='m_audiotracks' class='false'>?</td>
	<tr>
	</tr>
	  <th>Video</th><td id='m_videotracks' class='false'>?</td>
	<tr>
	</tr>
	  <th>Text</th><td id='m_texttracks' class='false'>?</td>
	</tr>
      </tbody>
    </table>

  </div>

<h2 style="clear:left">Limitations</h2>

  <ul>
    <li>Some events may be fired despite the lack of effect on the video itself,
    in particular while trying to change the playback rate;</li>
    <li>Not all conditions are necessarily there to generate every single
    possible event, such as <code>stalled</code> or <code>emptied</code>;</li>
    <li>The rendered page may not be updated while the video is
     playing. Thus you may see plenty of <code>timeupdate</code>
     events counted after the video is paused/stopped;</li>
    <li>Remember, HTML5 Video is still work in progress, so anything
    on this page may be deprecated tomorrow and no longer part of
    HTML5;</li>
   </ul>
<hr>

<address>plh@w3.org - November 2011</address>
<p>
Many, many thanks to the <a href='http://www.blender.org/blenderorg/blender-foundation/'>Blender
Foundation</a> and the community around the <a href='http://www.blender.org/'>blender project</a>.
</p>

     </body>
</html>
